import { DragOutlined, SmileOutlined } from '@ant-design/icons';
import { Dropdown } from 'antd';
import classNames from 'classnames';
import { useMemo, useState } from 'react';
import type { YmDataNode } from 'ym-design';
import { YmTree } from 'ym-design';
import './titleRender.less';

const DEFAULTTREEDATA: YmDataNode[] = [
  {
    key: '0',
    title: 'parent 0',
    num: 1000,
    children: [
      { key: '0-0', title: 'parent 0-0', num: 300 }, //, children: [{ key: '0-0-0', title: 'leaf 0-0-0' }]
      {
        key: '0-1',
        title:
          'parent 0-1 disableCheckbox false 我好多学科萨芬那算的就卡的减法OA发动机阿来得及',
        disableCheckbox: false,
        num: 500,
        children: [
          {
            key: '0-1-0',
            title: 'leaf 0-1-0 为二级阿斯顿福建阿萨德开饭啦SDK',
            num: 360,
            disabled: true,
          },
          {
            key: '0-1-1',
            title: 'leaf 0-1-1 disableCheckbox',
            disableCheckbox: true,
            num: 130,
          },
          { key: '0-1-2', title: 'leaf 0-1-2', isLeaf: true, num: 10 },
          {
            key: '0-1-3',
            title: 'leaf 0-1-3 showCheckableBox false',
            showCheckableBox: false,
          },
        ],
      },
      // {
      //   key: '0-2',
      //   title: 'parent 0-2',
      // }
    ],
  },
];

const DROPDOWNMENUITEMS = [
  {
    label: '新增',
    key: 'addCarGroup',
  },
  {
    label: '编辑',
    key: 'editCarGroup',
  },
  {
    label: '删除',
    key: 'deleteCarGroup',
  },
];

const handleTitleRender = (data: YmDataNode) => {
  const { key, title, num, disabled, index } = data;
  const [dropDownOpen, setDropDownOpen] = useState<boolean>(false);
  return (
    <div
      className={classNames('tree-cus-title-content', {
        ['drop-down-open']: dropDownOpen,
      })}
    >
      <div className="content-left">
        <div className="left-text">{title as string}</div>
        {num && <div className="left-num">({num})</div>}
      </div>
      {!disabled && (
        <div className="content-right">
          {key !== '0-1-3' && <DragOutlined className="icon-drag" />}
          <Dropdown
            trigger={['hover']}
            overlayClassName=""
            placement="bottomRight"
            onOpenChange={(newOpen) => {
              console.log('--dropDownOpen--:', newOpen);
              setDropDownOpen(newOpen);
            }}
            menu={{
              items: DROPDOWNMENUITEMS,
              onClick: (item) => {
                console.log('--dropDown--item--:', item);
              },
            }}
          >
            <p className="icon-more" id={key}>
              ...
            </p>
          </Dropdown>
        </div>
      )}
    </div>
  );
};

function TitleRender() {
  const [treeData, setTreeData] = useState<YmDataNode[]>(DEFAULTTREEDATA);
  const [checkedKeys, setCheckedKeys] = useState<string[]>(['0-1', '0-1-1']);

  const handleCheck = (
    checkedKeys: string[],
    info: {
      node: YmDataNode;
      checked: boolean;
      checkedNodes: YmDataNode[];
      nativeEvent: MouseEvent;
      halfCheckedKeys: string[];
    },
  ): void => {
    console.log(
      '--CheckAble--checkedKeys--halfCheckedKeys--:',
      checkedKeys,
      info.halfCheckedKeys,
    );
    setCheckedKeys([...checkedKeys]);
  };

  const handleDrop = ({ event, node, dragNode }: any) => {
    const dropKey = node.key;
    const dragKey = dragNode.key;

    const loop = (data: YmDataNode[], key: string, callback: Function) => {
      data.forEach((item, index, arr) => {
        if (item.key === key) {
          callback(item, index, arr);
          return;
        }
        if (item.children) {
          loop(item.children, key, callback);
        }
      });
    };

    const data = [...treeData];

    // Find dragObject
    let dragObj: YmDataNode;
    loop(
      data,
      dragKey,
      (item: YmDataNode, index: number, arr: YmDataNode[]) => {
        dragObj = item;
        arr.splice(index, 1);
      },
    );

    loop(
      data,
      dropKey,
      (item: YmDataNode, index: number, arr: YmDataNode[]) => {
        arr.splice(index + 1, 0, dragObj);
      },
    );

    console.log('--YmTreePage--onDrop--data--:', data);

    setTreeData([...data]);
  };

  const dragableConfig = useMemo(() => {
    return {
      icon: null,
      nodeDraggable: (node: YmDataNode) => {
        return node.key === '0-1-3' ? false : true;
      },
    };
  }, []);

  return (
    <div className="tree-page">
      <YmTree
        rootStyle={{ width: '400px', border: '#666 solid 1px' }}
        treeShowCheckableBox
        treeSelectable={false}
        draggable={dragableConfig}
        treeData={treeData}
        defaultExpandedKeys={['0-1']}
        // defaultCheckedKeys={['0-1', '0-1-1']}
        checkedKeys={checkedKeys}
        onCheck={handleCheck}
        icon={<SmileOutlined />}
        titleRender={handleTitleRender}
        onDrop={handleDrop}
      />
    </div>
  );
}

export default TitleRender;
